import { defineComponent, ref } from "vue";
import VChart from "vue-echarts";
import { use } from "echarts/core";
import { LineChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
} from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
import "./TrafficFlow.css";

use([LineChart, TitleComponent, TooltipComponent, GridComponent, LegendComponent, CanvasRenderer]);

export default defineComponent({
  name: "TrafficFlow",
  components: {
    VChart,
  },
  setup() {
    const chartOption = ref({
      tooltip: {
        trigger: "axis",
        backgroundColor: "rgba(0, 0, 0, 0.8)",
        borderColor: "#00d4ff",
        borderWidth: 1,
        textStyle: {
          color: "#fff",
        },
      },
      legend: {
        data: ["主干道", "次干道", "支路"],
        textStyle: {
          color: "#fff",
        },
        top: 10,
      },
      grid: {
        left: "10%",
        right: "10%",
        bottom: "15%",
        top: "20%",
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: ["00:00", "04:00", "08:00", "12:00", "16:00", "20:00", "24:00"],
        axisLine: {
          lineStyle: {
            color: "rgba(0, 212, 255, 0.3)",
          },
        },
        axisLabel: {
          color: "#fff",
        },
      },
      yAxis: {
        type: "value",
        name: "车流量",
        nameTextStyle: {
          color: "#fff",
        },
        axisLine: {
          lineStyle: {
            color: "rgba(0, 212, 255, 0.3)",
          },
        },
        axisLabel: {
          color: "#fff",
        },
        splitLine: {
          lineStyle: {
            color: "rgba(0, 212, 255, 0.1)",
          },
        },
      },
      series: [
        {
          name: "主干道",
          type: "line",
          smooth: true,
          data: [1200, 800, 3500, 4200, 5800, 6200, 2800],
          areaStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: "rgba(0, 212, 255, 0.5)" },
                { offset: 1, color: "rgba(0, 212, 255, 0.1)" },
              ],
            },
          },
          lineStyle: {
            color: "#00d4ff",
            width: 3,
          },
          itemStyle: {
            color: "#00d4ff",
          },
        },
        {
          name: "次干道",
          type: "line",
          smooth: true,
          data: [800, 600, 2200, 2800, 3500, 3800, 1800],
          areaStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: "rgba(0, 255, 136, 0.5)" },
                { offset: 1, color: "rgba(0, 255, 136, 0.1)" },
              ],
            },
          },
          lineStyle: {
            color: "#00ff88",
            width: 3,
          },
          itemStyle: {
            color: "#00ff88",
          },
        },
        {
          name: "支路",
          type: "line",
          smooth: true,
          data: [400, 300, 1200, 1500, 1800, 2000, 900],
          areaStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: "rgba(255, 215, 0, 0.5)" },
                { offset: 1, color: "rgba(255, 215, 0, 0.1)" },
              ],
            },
          },
          lineStyle: {
            color: "#ffd700",
            width: 3,
          },
          itemStyle: {
            color: "#ffd700",
          },
        },
      ],
    });

    return () => (
      <div class="traffic-flow">
        <div class="traffic-flow__header">
          <h3 class="traffic-flow__title">实时交通流量</h3>
        </div>
        <div class="traffic-flow__chart">
          <VChart option={chartOption.value} autoresize style="height: 100%; width: 100%;" />
        </div>
      </div>
    );
  },
});
